// Dom7
var $$ = Dom7;

// Framework7 App main instance
var app = new Framework7({
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    theme: 'ios', // Automatic theme detection
    // Enable swipe panel
    panel: {
        swipe: 'left',
    },
    view: {
        stackPages: true, // 多级页面缓存
        pushState: true, // 开启 url 根据路由 hash 变化
    },

    // App root data
    data: function() {
        return {
            user: {
                firstName: 'John',
                lastName: 'Doe',
            },
            application: [{
                id: "tableId",
                type: 'table',
                title: "当日净增通话客户数",
                header: ["A_长沙", "B_岳阳", "C_湘潭", "D_株洲", "G_常德", "H_益阳", "I_娄底", "I_娄底"],
                body: [
                    ["A_长沙", 21730, 89220, 44572, 55339, 55339, 3944, 50539],
                    ["B_岳阳", 217130, 83920, 45572, 55839, 55339, 3944, 50539],
                    ["C_湘潭", 217330, 8920, 4572, 55739, 55339, 3944, 50539],
                    ["D_株洲", 217304, 82920, 46572, 5539, 55339, 3944, 50539],
                    ["G_常德", 21730, 89220, 44572, 55339, 55339, 3944, 50539],
                    ["H_益阳", 217130, 83920, 45572, 55839, 55339, 3944, 50539],
                    ["I_娄底", 217330, 8920, 4572, 55739, 55339, 3944, 50539],
                ],
                style: {
                    fontHVal: "",
                    fontBVal: "",
                    stripeSwitch: true,
                    stripeColor: "#FFF",
                    stripeBgColor: "#f8f8f9",
                    hColor: "#37393e",
                    bColor: "#37393e",
                    hBgColor: "#f8f8f9",
                    bBgColor: "#fff"
                }
            }, {
                id: "barId",
                type: 'bar',
                title: "当日净增通话客户数",
                header: ["A_长沙", "B_岳阳", "C_湘潭", "D_株洲", "G_常德", "H_益阳", "I_娄底", "I_娄底"],
                body: [21730, 8920, 4572, 5539, 55339, 3944, 50539, 3944],
                style: {
                    lengedTitle: "数值",
                    bodyColor: "#0384df",
                    fontHVal: "",
                    fontBVal: "",
                    xRotate: 0,
                    showX: true,
                    showY: true,
                    xFontSize: 12,
                    showTitle: true,
                    hColor: "#37393e",
                    bColor: "#37393e"
                }
            }, {
                id: "lineId",
                type: 'line',
                title: "当日净增通话客户数",
                header: ["A_长沙", "B_岳阳", "C_湘潭", "D_株洲", "G_常德", "H_益阳", "I_娄底", "I_娄底"],
                body: [21730, 8920, 4572, 5539, 55339, 3944, 50539, 3944],
                style: {
                    lengedTitle: "数值",
                    smooth: true,
                    bodyColor: "#0384df",
                    fontHVal: "",
                    fontBVal: "",
                    xRotate: 0,
                    showX: true,
                    showY: true,
                    xFontSize: 12,
                    showTitle: true,
                    hColor: "#37393e",
                    bColor: "#37393e"
                }
            }, {
                id: 'pieId',
                type: 'pie',
                title: "当日净增通话客户数",
                header: ["移动", "联通", "电信"],
                body: [{
                    value: 335,
                    name: "移动"
                }, {
                    value: 310,
                    name: "联通"
                }, {
                    value: 234,
                    name: "电信"
                }],
                style: {
                    bodyColor1: "#0384df",
                    bodyColor2: "#86d8dd",
                    bodyColor3: "#9384df",
                    bodyColor4: "#0314df",
                    bodyColor5: "#0084df",
                    fontHVal: "",
                    fontBVal: "",
                    showX: true,
                    showY: true,
                    showTitle: true,
                    hColor: "#37393e",
                    bColor: "#37393e"
                }
            }],

        };
    },
    // App root methods
    methods: {
        helloWorld: function() {
            app.dialog.alert('Hello World!');
        },
        getData() {
            app.preloader.show();
            setTimeout(function() {
                app.preloader.hide();
            }, 1000);
            return
            this.request.get('blog-post.php', { foo: 'bar', id: 5 }, function(data) {
                app.preloader.hide();
                // console.log('data :', data)
            }, function(xhr, status) {
                app.preloader.hide();
                toastError.open();
                console.log('xhr:', xhr);
                // console.log('status:',status);
                toastError.open();
            });
        },
        postData() {
            app.preloader.show();
            app.request.post('auth.php', { username: 'foo', password: 'bar' }, function(data) {
                app.preloader.hide();
                // console.log('data :', data)
            }, function(xhr, status) {
                app.preloader.hide();
                toastError.open();
                console.log('xhr:', xhr);
                // console.log('status:',status);
                toastError.open();
            });
        },
    },
    // Page Events
    on: {
        pageInit: function(e) {
            // console.log('pageInit e', e);
            // console.log('pageInit app.routes', app.routes);
        },
    },
    // App routes
    routes: routes,
});

// Init/Create main view
var mainView = app.views.create('.view-main', {
    url: '/'
});

window.addEventListener(
    "message",
    event => {
        if (event.data) {
            console.log("message event.data", event.data);
            // console.log("message event.data", JSON.parse(event.data));
            // let applications = JSON.parse(event.data);
            // this.$store.commit("SAVE_APPLICATIONS", {
            //   applications
            // });
        }
    },
    false
);

// console.log('flag :', flag)
// console.log('app :', app)
app.data.user = {
    firstName: 'chen',
    lastName: 'biao',
}
app.methods.getData()

// app.preloader.show();
// setTimeout(function() {
//     app.preloader.hide();
// }, 1000);

var calendarDefault1 = app.calendar.create({
    inputEl: '#demo-calendar-default1',
});

// Create toast with icon
var toastSuccess = app.toast.create({
    icon: app.theme === 'ios' ? '<i class="f7-icons">check</i>' : '<i class="check-icons">提示</i>',
    text: '成功 !',
    position: 'center',
    closeTimeout: 2000,
});

var toastError = app.toast.create({
    icon: app.theme === 'ios' ? '<i class="f7-icons">close</i>' : '<i class="close-icons">提示</i>',
    text: '获取数据失败 !',
    position: 'center',
    closeTimeout: 2000,
});

$$('.open-toast-icon').on('click', function() {
    toastSuccess.open();
});
$$('.open-toast-error').on('click', function() {
    toastError.open();
});